<template>
	<view class="content">
		<view :class="show ? 'fade-in' : 'fade-out'">
			<tn-swiper mode="number" indicatorPosition="bottomRight" :height="500" :list="list"></tn-swiper>
			<view class="box">
				<view class="title">{{user.title}}</view>
				<block v-if="user.is_myself">
					<view class="my-position right tn-flex tn-flex-direction-column tn-flex-col-center" v-if="user.is_ding == 1"
						@click="showCancelDing(0)">
						<image src="/static/index/ding1.png" mode=""></image>
						<view class="t1">已置顶</view>
					</view>
					<view class="my-position right tn-flex tn-flex-direction-column tn-flex-col-center" v-if="user.is_ding == 0"
						@click="dingUser">
						<image src="/static/index/ding.png" mode=""></image>
						<view class="t1">置顶</view>
					</view>
				</block>
				
				
				<view class="headline tn-flex tn-flex-col-center">
					<view class="kuai"></view>
					<text>活动详情</text>
				</view>
				<view class="details">{{user.detail}}</view>
				<view class="headline tn-flex tn-flex-col-center">
					<view class="kuai"></view>
					<text>举办时间</text>
				</view>
				<view class="details">{{user.times}}</view>
				<view class="headline tn-flex tn-flex-col-center">
					<view class="kuai"></view>
					<text>举办地点</text>
				</view>
				<view class="details">{{user.address}}</view>
				<view class="headline tn-flex tn-flex-col-center">
					<view class="kuai"></view>
					<text>活动参与者</text>
				</view>
				<view class="img-list tn-flex tn-flex-wrap">
					<block v-for="(item,index) in groupList" :key="index">
						<view v-if="user.is_myself" class="my-active-user" >
							<view style="padding-right: 20rpx;">{{item.username}}</view>
							<view>{{item.mobile}}</view>
						</view>
						
						<image v-else :src="item.src" mode=""></image>
					</block>
				</view>
				<view class="" style="height: 120rpx;"></view>
			</view>
			
			<block v-if="type && user.status==1">
				<view class="btn" @click="activeComplete">确认结束</view>
			</block>
			<bolck v-if="!type">
				<block v-if="!user.is_follow">
					<view class="btn" v-if="user.active_expire == 0 || user.status != 3" @click="openFollow">参与活动</view>
					<view style="background: linear-gradient(180deg, #cdcdcd 0%, #707070 100%);" class="btn" v-if="user.active_expire == 1 || user.status == 3" >活动已结束</view>
				</block>
				<!-- <view class="btn" v-if="!user.is_follow" @click="openFollow">参与活动</view> -->
				<view class="btn cancel-bg" @click="follow(2)" v-else>已报名，取消参加</view>
			</bolck>
			<!-- <view class="btn" v-if="!user.is_follow" @click="openFollow">参与活动</view>
			<view class="btn cancel-bg" @click="follow(2)" v-else>已报名，取消参加</view> -->
			
			<!-- 参与活动弹窗填写姓名和手机号 -->
			<tn-popup v-model="followShow" mode="bottom">
				<view class="my-popup-close" @click="closeFolloww">X</view>
				<view class="my-popup-title">
					参与活动须填写姓名和电话号码!
				</view>
				<view class="my-popup">
					<view class="input-item">
						<input class="input-dom" type="text" v-model="username" maxlength="11" placeholder="请输入姓名" />
					</view>
					<view class="input-item">
						<input class="input-dom" type="text" v-model="telStr" maxlength="11" placeholder="请输入手机号码" />
					</view>
					<view class="input-item">
						<input class="input-dom" type="text" v-model="coedStr" maxlength="11" placeholder="请输入验证码" />
						<view class="text" :class="[sendIng ? 'sendIng' : '']" @click="sendSmFn" style="">
							{{ calcTextStr }}
						</view>
					</view>
				</view>
				<view class="btn"  @click="follow(1)">提交</view>
			</tn-popup>
			
			<!-- 置顶弹窗 -->
			<tn-popup v-model="dingStatus" mode="bottom">
				<view class="my-popup-close" @click="closeDing">X</view>
				<view class="my-popup-title">
					置顶需选择时间及支付方可置顶!
				</view>
				<view style="text-align: center;">
					<view>置顶基础费率:<text style="font-weight: bold;">{{ding.ding_money}}</text>海豚币/{{ding.unit}}</view>
					<view style="margin-top: 10rpx;">预计需支付<text style="color: red;font-weight: bold;">{{total_ding_money}}</text>海豚币</view>
				</view>
				<view class="my-popup">
					<view class="input-item">
						<input class="input-dom" type="text" v-model="ding_number" maxlength="11" placeholder="请输入置顶时间" @input="handleInput" />
					</view>
				</view>
				<view class="btn"  @click="toPayDing">提交</view>
			</tn-popup>
			
		</view>
	</view>
</template>
<script>
	import permissionGuide from "@/components/permissionGuide/index.vue"
	import {
		imgUploading
	} from "@/common/common.js"
	let timer;
	export default {
		data() {
			return {
				list: [],
				id: '',
				user: '',
				groupList: '',
				show: false,
				followShow:false,
				telStr: '',
				username: '',
				myUserId: 0,//当前登录的用户id
				type: '',//跳转来源
				dingStatus:false,
				ding: [],
				ding_number: '',
				total_ding_money: 0,
				// 是否在发送中的状态
				sendIng: false,
				// 用户发送验证码的次数
				sendSmCont: 0,
				// 间隔一分钟 后可以再次发送
				intervalTime: 60,
				// 显示在页面上的倒计时
				showIntervalStr: 0,
				coedStr: ''
			}
		},
		onLoad(option) {
			if (option.type) this.type = option.type;
			console.log(option)
			this.id = option.id
			this.getUser()
			this.myUserId = uni.getStorageSync('user_id');
		},
		onUnload() {
			clearInterval(timer);
		},
		methods: {
			toDing() {
				this.dingStatus = true
			},
			handleInput(event) {
				this.total_ding_money = 0;
			      // event.target.value 包含了输入框的当前值
			      const inputValue = event.target.value;
				  if (parseInt(inputValue) <= 0 || isNaN(parseInt(inputValue))) {
					  return false;
				  }
				  this.total_ding_money = this.ding.ding_money * inputValue
			      // console.log('输入的内容是：' + inputValue);
			      // 在这里可以根据需要处理输入的内容
			},
			closeDing(){
				this.dingStatus = false;
				this.total_ding_money = 0;
				this.ding_number = '';
			},
			async toPayDing() {
				let that = this;
				if (this.total_ding_money <= 0) {
					this.msg('请正确填写置顶时间')
					return false;
				}
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/api/user/buy_ding',
					data: {
						id: that.user.id,
						type: 'active',
						number: that.ding_number
					}
				});
				
				
			
				if (result.statusCode == 200) {
					if (result.data.code == 200) {
			
						if (result.data.msg == '余额不足') {
							that.chongzhiis = true
						}
			
						this.msg(result.data.msg)
						setTimeout(() => {
							this.getUser()
							this.closeDing()
						}, 3000)
						
			
			
					}
				}
			},
			
			// 置顶
			async dingUser() {
				var now = Math.floor((+ new Date()) / 1000);
				var expire = this.user.ding_expire;
				if (expire > now) {
					//在置顶期间内，直接置顶
					this.cancleDing(1)
				} else {
					//弹窗购买
					this.ding = this.user.ding;
					this.dingStatus = true;
				}
			},
			
			//取消置顶时需要弹窗
			showCancelDing() {
				//不可以取消置顶
				return;
				var _this = this;
				//弹个窗===取消置顶
				uni.showModal({
					title: '提示',
					// showCancel: false,
					content: '取消置顶后，您的活动将不被优先展示，费用不可退，关闭后可再次打开，确认取消置顶吗？',
					success: function(res) {
						if (res.confirm) {
							_this.cancleDing(0)
							
						} else if (res.cancel) {
							
						}
					}
				});
			},
			
			// 置顶
			async cancleDing(status) {
				try {
					let result = await this.$request({
						loading: 0,
						method: 'get',
						url: '/api/user/cancle_ding',
						data: {
							id: this.user.id,
							type:'active',
							status: status
						}
					})
					this.user.is_ding = this.user.is_ding == 0 ? 1 : 0
				} catch (e) {
					this.msg(e.data.msg)
				}
			},

			async getUser() {
				let result = await this.$request({
					loading: 1,
					method: 'post',
					url: '/api/index/Active_detail',
					data: {
						id: this.id
					}
				})
				let data = result.data.data
				this.user = data
				this.list = data.images
				this.groupList = data.viewUser.latestUserAvatar
				this.ding = data.ding
				// console.log(this.groupList)
				this.show = true
			},
			openFollow() {
				this.followShow = true
			},
			closeFolloww(){
				this.followShow = false;
				this.telStr = '';
				this.username = '';
			},
			async activeComplete() {
				let result = await this.$request({
					loading: 0,
					method: 'post',
					url: '/api/user/activeComplete',
					data: {
						id: this.id
					}
				})
				uni.showToast({
					title: result.data.msg,
					icon: "none"
				});
				
				this.getUser()
			},
			// 报名或者取消
			async follow(type) {
				if (type==1) {
					if (this.username.length <= 0) {
						uni.showToast({
							icon: 'none',
							title: '姓名不能为空'
						});
						return false;
					}
					if (this.telStr.length <= 0) {
						uni.showToast({
							icon: 'none',
							title: '手机号码不能为空'
						});
						return false;
					}
					if (!this.regTel(this.telStr)) {
						uni.showToast({
							icon: 'none',
							title: '手机号码格式有误'
						});
						return false;
					}
					if (this.coedStr.length <= 0) {
						uni.showToast({
							icon: 'none',
							title: '验证码不能为空'
						});
						return false;
					}
				}
				let result = await this.$request({
					loading: 0,
					method: 'post',
					url: '/api/user/followactive',
					data: {
						id: this.id,
						username: this.username,
						mobile:this.telStr,
						code:this.coedStr
					}
				})
				uni.showToast({
					title: result.data.msg,
					icon: "none"
				});
				this.closeFolloww()
				// this.user.is_follow = !this.user.is_follow
				this.getUser()
			},
			// 发送验证码
			async sendSmFn() {
				let that = this;
				if (that.sendIng) {
					return false;
				}
				if (that.telStr.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '手机号码不能为空'
					});
					return false;
				}
				if (!that.regTel(that.telStr)) {
					uni.showToast({
						icon: 'none',
						title: '手机号码格式有误'
					});
					return false;
				}
				that.sendSmCont++;
				that.sendIng = true;
			
				that.startIntervalFn();
				let result = await that.$request({
					method: 'post',
					url: `/api/login/sendsms`,
					data: {
						mobile: that.telStr,
						event: 'joinActive'
					}
				});
			
				if (result.statusCode == 200) {
					if (result.data.code == 200) {
			
						if (result.data.data.sms_is == 0) {
			
							that.coedStr = result.data.data.code
			
			
							uni.showModal({
								title: '提示',
								showCancel: false,
								content: '未开启短信发送,系统自动填写验证码,直接登录即可',
								success: function(res) {
									if (res.confirm) {
			
									} else if (res.cancel) {
			
									}
								}
							});
			
			
			
						} else {
							uni.showToast({
								icon: 'none',
								title: '发送成功，请查收'
							});
						}
			
			
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
						that.sendIng = false;
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
					that.sendIng = false;
				}
			},
			// 开启倒计时
			startIntervalFn() {
				let that = this;
				that.showIntervalStr = that.intervalTime;
				clearInterval(timer);
				timer = setInterval(() => {
					that.showIntervalStr--;
					if (that.showIntervalStr <= 0) {
						that.sendIng = false;
					}
				}, 1000);
			}
		},
		computed: {
			// 发送验证码 按钮的文字
			calcTextStr() {
				let that = this;
				// 第一次发送验证码 - 获取验证码
				// 第多次发送验证码 - 重新获取验证码
				let str = ``;
				if (that.sendSmCont <= 0) {
					if (that.sendIng) {
						str = `重新获取(${that.showIntervalStr})`;
					} else {
						str = `获取验证码`;
					}
				} else {
					if (that.sendIng) {
						str = `重新获取(${that.showIntervalStr})`;
					} else {
						str = `获取验证码`;
					}
				}
				return str;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.ding{
		width: 40rpx;
		height: 42rpx;
	}
	.my-position{
		position: absolute;
		right: 6%;
		margin-top: -100rpx;
	}
	.content {
		/deep/.tn-swiper__indicator {
			bottom: 63rpx !important;
		}

		.box {
			//background-color: #111224;
			border-radius: 40rpx 40rpx 0 0;
			//position: absolute;
			//top: 450rpx;
			//left: 0;
			//right: 0;
			padding: 40rpx 30rpx 0 30rpx;

			.title {
				font-size: 40rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 32rpx;
			}

			.headline {
				.kuai {
					width: 21rpx;
					height: 21rpx;
					border: 4rpx solid #9D5EF4;
					border-radius: 50%;
				}

				text {
					font-size: 30rpx;
					font-weight: 400;
					color: #333333;
					margin-left: 12rpx;
				}
			}

			.details {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333ad;
				padding-left: 30rpx;
				margin-top: 16rpx;
				margin-bottom: 32rpx;
			}

			.img-list {
				margin-top: 16rpx;

				image {
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
					margin-right: 36rpx;
					margin-bottom: 36rpx;
				}
			}

		}

		.btn {
			height: 98rpx;
			background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
			border-radius: 49rpx;
			position: fixed;
			bottom: 40rpx;
			left: 30rpx;
			right: 30rpx;
			text-align: center;
			line-height: 98rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
		}

		.cancel-bg {
			background: #CCCCCC;
		}
	}
	
	.input-item {
		display: flex;
		align-items: center;
		height: 100rpx;
		background: $uni-login-input-bg-color;
		border-radius: 52rpx;
		margin-bottom: 40rpx;
		padding: 0 40rpx;
	
		.label {
			font-size: 32rpx;
			font-weight: bold;
			color: $uni-login-title-color;
			margin-right: 40rpx;
		}
	
		.input-dom {
			flex: 1;
			font-size: 28rpx;
			color: $uni-login-title-color;
		}
	
		.text {
			font-size: 30rpx;
			color: $uni-login-title-color;
		}
	}
	.my-popup{
		padding: 60rpx 100rpx 200rpx 100rpx;
	}
	.my-popup-title{
		padding: 40rpx;
		font-size: 34rpx;
		text-align: center;
		font-weight: 700;
	}
	.my-popup-close{
		width: 60rpx;
		height: 60rpx;
		background: #e1e1e1;
		border-radius: 50%;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		font-size: 36rpx;
		float: right;
		margin: 20rpx;
	}
	.my-active-user{
		padding: 16rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.right {
		width: 80rpx;
	
		image {
			width: 48rpx;
			height: 44rpx;
		}
	
		.t1 {
			font-size: 24rpx;
			font-weight: 500;
			color: #333333;
			margin-top: 12rpx;
		}
	}
</style>
